<include file='Index/header' />
<div class="row">
	<br>
	<div class="col-sm-12" >
    	<button type="button" data-toggle="modal" class="btn btn-primary" onclick="edit()">添加属性</button>
    	<br><br>
  </div>

	<div class="col-sm-12">
		<br>
		<table id="property_list_table" class="table table-hover table-bordered table-striped table-striped">
			<thead>
				<tr>
					<td>编号</td>
					<td>中文名称</td>
					<td>英文名称</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</div>
</div>

<div id="property_modal" class="modal fade">
  <div class="modal-dialog" >
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">属性</h4>
          </div>
          <div class="modal-body">
              <div class="row">
              <form id="property_form" action='{:U("Admin/Property/save/")}' method="post">
              <div class="form-group">
                  <div class="col-sm-12">
                      <br>
											<div class="col-sm-2"></div>
                      <div class="col-sm-3" style="padding-left:15px;padding-top:5px">
                          <label for="zh_name" class="control-label">中文名称：</label>
                      </div>
                      <div class="col-sm-5">
                          <input id="zh_name" name="zh_name" class="form-control" />
                          <br/>
                      </div>
                      <div class="col-sm-2"></div>
                  </div>

									<div class="col-sm-12">
										<div class="col-sm-2"></div>
                  	<div class="col-sm-3" style="padding-left:15px;padding-top:5px">
                      <label for="en_name" class="control-label">英文名称：</label>
                    </div>
                    <div class="col-sm-5">
                      <input id="en_name" name="en_name" class="form-control" />
                    </div>
                    <div class="col-sm-2"></div>
                  </div>

                  <div class="col-sm-12">
                  	<br>
										<div class="col-sm-2"></div>
                  	<div class="col-sm-3" style="padding-left:15px;padding-top:5px">
                      <label for="isdisplay" class="control-label">是否显示：</label>
                    </div>
                    <div class="col-sm-5">
                      <input id="isdisplay" name="isdisplay" type="checkbox" value="1" />
                    </div>
                    <div class="col-sm-2"></div>
                  </div>

                  <br><br>
              </div>
              </form>
              </div>
          </div>
          <div class="modal-footer">
              <button class="btn btn-primary" onclick="save()">确认</button>
              <button class="btn btn-defalt" data-dismiss="modal">关闭</button>
          </div>
      </div>
  </div>
</div>

<include file='Index/footer' />
<script>
$(document).ready(function() {
	loadTable();		
});

var table;
function loadTable(){
	var data = '{$data}';
	data = eval(data);
	table = $('#property_list_table').DataTable({
		"bProcessing": true,
		"bDestroy": true,
		"stateSave": true,
		"sPaginationType" : "full_numbers",
		"oLanguage" : {
              "sLengthMenu": "每页显示 _MENU_ 条记录",
              "sZeroRecords": "抱歉， 没有找到",
              "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
              "sInfoEmpty": "没有数据",
              "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
              "sZeroRecords": "没有检索到数据",
               "sSearch": "搜索: &nbsp",
              "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
              }
          }, 
		"data" : data,
		"columns": [
					{ "data":'id'},
					{ "data":'zh_name'},
					{ "data":'en_name'},
					{ "data":'btn'},
    ],
    "columnDefs": [
    	{
	    	"targets": 0,
	    	"data": null,
	    	"render": function (data, type, row, table) {
	    		
	        return table.row + 1;
	      },
	    },
	    {
	    	"targets": -1,
	    	"data": null,
	    	"render": function (data, type, row, table) {
	        return '<button class="btn btn-info" onclick="edit(\''+row.id+'\')">编辑</button> <button class="btn btn-warning" onclick="del(\''+row.id+'\')">删除</button>';
	      },
	    }
    ]
	});
}

var save_id = '';
function edit(id){
	if(id){
		save_id = id;
		$.ajax({
			url: '{:U("Admin/Property/get/")}',
			type: 'post',
			dataType: 'json',
			data:{
				"id":id
			}
		})
		.success(function(data){
			//console.log(data);
			$('#zh_name').attr('value', data.zh_name);
			$('#en_name').attr('value', data.en_name);
			if(data.isdisplay == '1'){
				$('#isdisplay').attr('checked', true);
			}
		});
	}
	
	$('#property_modal').modal({
		backdrop : "static"
	});
}

function del(id){
	if(!confirm("是否确认删除？")){
		return;
	}
	$.ajax({
			url: '{:U("Admin/Property/del/")}',
			type: 'post',
			dataType: 'json',
			data:{
				"id":id
			}
		})
		.success(function(data){
			location.reload();
	});
}

function save(){
  $('#property_form').ajaxSubmit({    
      data:{
          id : save_id
      },
      success:function(data){
          $('#property_modal').modal('hide');
          location.reload();
      }
  });
}

$('#property_modal').on("hidden.bs.modal",function(e){
	save_id = '';
  $('#zh_name').attr('value', '');
	$('#en_name').attr('value', '');
	$('#isdisplay').attr('checked', false);
}); 
</script>
